<template>
  <el-main v-loading="open" element-loading-background="rgba(243,244,247,1)">
    <el-card>
      <!-- 顶部搜索框和按钮 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            clearable
            v-model="pageInfo.qurey"
            prefix-icon="el-icon-search"
            placeholder="请输入搜索内容"
            style="width: 400px"
            @clear="getCategoryList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getCategoryList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addCategoryDiolog = true">新增菜品分类</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="categoryName" label="分类名称" width="150"></el-table-column>
        <el-table-column prop="updateUser" label="操作人" width="120"></el-table-column>
        <el-table-column prop="shopName" label="所属商家" width="220"></el-table-column>
        <el-table-column prop="updateTime" label="操作时间" width="230"></el-table-column>
        <el-table-column prop="categoryInfo" label="分类简介" width="400"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" class="edit" @click="editCategoryInfo(scope.row.id)">修改</el-button>
            <span class="line">|</span>
            <el-button type="text" class="disable" @click="deleteCategoryInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 新增菜品分类弹窗 -->
      <el-dialog title="添加菜品分类" :visible.sync="addCategoryDiolog" width="50%" @close="addDiologClose">
        <el-form ref="addCategoryRef" :model="addCategoryForm" label-width="120px" :rules="addCategoryRules">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="addCategoryForm.categoryName" clearable placeholder="请输入分类名称" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="所属商家名称" prop="shopId">
            <el-select v-model="addCategoryForm.shopId" placeholder="请选择商家" style="width: 300px">
              <el-option v-for="(item, index) in shopList" :key="index" :label="item.shopName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="categoryInfo">
            <el-input type="textarea" v-model="addCategoryForm.categoryInfo" clearable placeholder="请输入内容" autosize></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCategoryDiolog = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改对话框 -->
      <el-dialog title="修改菜品分类信息" :visible.sync="editCategoryDiolog" width="50%" @close="editDiologClose">
        <el-form ref="editCategoryRef" :model="addCategoryForm" label-width="80px" :rules="addCategoryRules">
          <el-form-item label="分类名称" prop="categoryName">
            <el-input v-model="addCategoryForm.categoryName" clearable placeholder="请输入分类名称"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="categoryInfo">
            <el-input type="textarea" v-model="addCategoryForm.categoryInfo" clearable placeholder="请输入内容" autosize></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editCategoryDiolog = false">取 消</el-button>
          <el-button type="primary" @click="editCategory">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'MealsClassify',
  data() {
    return {
      open: true,
      tableData: [],
      total: 0,
      pageInfo: {
        //模糊查询的数据
        qurey: '',
        //当前页数
        pageNum: 1,
        //每页显示的数据条数
        pageSize: 3,
      },
      //控制添加弹窗的显示与隐藏
      addCategoryDiolog: false,
      //添加弹窗的表单数据
      addCategoryForm: {
        categoryName: '',
        categoryInfo: '',
        shopId: '',
        userName: '',
      },
      //添加弹窗的验证规则
      addCategoryRules: {
        //账号检验规则
        categoryName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        shopId: [{ required: true, message: '请选择菜品分类', trigger: 'blur' }],
      },
      info: [],
      //控制修改对话框
      editCategoryDiolog: false,
      //商家列表数据
      shopList: [],
    };
  },
  mounted() {
    this.info = JSON.parse(localStorage.getItem('userinfo'));
  },
  created() {
    this.openFullScreen();
    this.getCategoryList();
    this.getShopList();
  },

  methods: {
    openFullScreen() {
      this.open = true;
      setTimeout(() => {
        this.open = false;
      }, 1000);
    },
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getCategoryList();
    },

    handleCurrentChange(newPageNum) {
      this.pageInfo.pageNum = newPageNum;
      this.getCategoryList();
    },
    //获取商家列表
    async getShopList() {
      const { data: res } = await this.$http.get('dish/getShopList');
      if (res.code == 1) {
        this.shopList = res.data;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    async getCategoryList() {
      const { data: res } = await this.$http.get('category/getList', {
        params: this.pageInfo,
      });
      if (res.code == 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      } else {
        return this.$message.error('请求失败');
      }
    },
    //新增菜品
    async addCategory() {
      this.addCategoryDiolog = false;

      this.$refs.addCategoryRef.validate(async (valid) => {
        if (valid) {
          this.addCategoryForm.userName = this.info.userName;
          const { data: res } = await this.$http.post('category/addCategory', this.addCategoryForm);
          if (res.code == 1) {
            this.getCategoryList();
            return this.$message.success(res.data);
          } else {
            return this.$message.error(res.msg);
          }
        } else {
          return this.$message.error('表单校验失败');
        }
      });
    },
    //监听对话框的关闭，关闭后将表单进行重置
    addDiologClose() {
      this.$refs.addCategoryRef.resetFields();
    },

    //修改对话框回显
    async editCategoryInfo(id) {
      this.editCategoryDiolog = true;
      const { data: res } = await this.$http.get('category/' + id);
      if (res.code == 1) {
        this.addCategoryForm = res.data;
      } else {
        return this.$message.error('菜品分类信息查询失败');
      }
    },
    //发送请求修改信息
    editCategory() {
      this.editCategoryDiolog = false;
      this.$refs.editCategoryRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('category/updateCategory', {
            userName: this.info.userName,
            categoryName: this.addCategoryForm.categoryName,
            categoryInfo: this.addCategoryForm.categoryInfo,
            id: this.addCategoryForm.id,
          });
          if (res.code == 1) {
            this.getCategoryList();
            return this.$message.success(res.data);
          } else {
            return this.$message.error(res.msg);
          }
        } else {
          return this.$message.error('表单校验失败');
        }
      });
    },
    editDiologClose() {
      this.$refs.editCategoryRef.resetFields();
    },
    //删除菜品分类
    async deleteCategoryInfo(id) {
      const { data: res } = await this.$http.delete('category/deleteCategory/' + id);
      if (res.code == 1) {
        if (this.pageInfo.pageNum > (this.total - 1) / this.pageInfo.pageSize && (this.total - 1) % this.pageInfo.pageSize == 0) {
          this.pageInfo.pageNum = this.pageInfo.pageNum - 1;
        }
        this.getCategoryList();
        return this.$message.success(res.data);
      } else {
        return this.$message.error('菜品分类删除失败');
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
.line {
  color: #ebeef5;
  font-size: 13px;
}
.disable {
  color: #f56c6c;
  font-size: 13px;
  margin-left: 6px;
}
.edit {
  color: #419eff;
  font-size: 13px;
  margin-right: 6px;
}
.table {
  display: flex;
  justify-content: space-evenly;
  margin-top: 25px;
}
.el-main {
  padding: 0px;
}
</style>